<script setup lang="ts">
import { ref } from 'vue'

// 地图标记
const markers = ref([
  { id: 1, position: [113.280637, 23.125178] },
  { id: 2, position: [113.111657, 23.022178] }
])

// 地图中心点
const center = ref([113.111657, 23.022178])

// 地图事件
const onUpdatedZoom = (e: number) => {
  console.log('当前缩放笔记', e)
}
</script>

<template>
  <div class="app">
    <!-- 地图容器 -->
    <el-amap @update:zoom="onUpdatedZoom" v-model:center="center">
      <!-- 地图标记 -->
      <el-amap-marker v-for="marker in markers" :key="marker.id" :position="marker.position" />
    </el-amap>
  </div>
</template>

<style scoped>
.app {
  width: 500px;
  height: 500px;
  border: 1px solid #f00;
}
</style>
